<script lang="ts" setup>
import { message } from 'ant-design-vue';
import type { PropType } from 'vue';

// 获取父组件传递的消息
const props = defineProps({
  visible: {
    type: Boolean as PropType<boolean>,
  },
  getVisible: {
    type: Function as PropType<() => void>,
    required: true,
  },
  departmentName: {
    type: String as PropType<string>,
  },
});

// 表单
const formRef = ref();

const form = ref({
  category: '',
  assessmentItem: '',
  weight: '',
  target: '',
  selfScoringMethod: '',
  notes: '',
});

const rules: any = {
  category: [{ required: true, message: '请输入类别', trigger: 'blur' }],
  assessmentItem: [{ required: true, message: '请输入考核项目', trigger: 'blur' }],
  weight: [{ required: true, message: '请输入权重', trigger: 'blur' }],
  target: [{ required: true, message: '请输入目标值', trigger: 'blur' }],
  selfScoringMethod: [{ required: true, message: '请输入计分方法', trigger: 'blur' }],
};

// 重置
function resetForm() {
  message.success('重置成功！');
  formRef.value.resetFields();
}

function onClose() {
  props.getVisible();
}

async function onSubmit() {
  await formRef.value.validate();
  const aItem = {
    assessedDepartment: props.departmentName,
    category: form.value.category,
    assessmentItem: form.value.assessmentItem,
    weight: form.value.weight,
    target: form.value.target,
    selfScoringMethod: form.value.selfScoringMethod,
    notes: form.value.notes,
    targetValue: '',
    completionValue: '',
    completionRateRank: '',
    score: '',
  };
  await addAssessment(aItem).then(() => {
    message.success('新增成功！');
    props.getVisible();
  });
}
</script>

<template>
  <div>
    <a-drawer
      title="新增考核项" :width="720" :visible="props.visible" :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <a-form ref="formRef" :model="form" layout="vertical" :rules="rules">
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="类别" name="category" prop="category">
              <a-input v-model:value="form.category" placeholder="请输入类别" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="考核项目" name="assessmentItem" prop="assessmentItem">
              <a-input v-model:value="form.assessmentItem" placeholder="请输入考核项目" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="权重" name="weight" prop="weight">
              <a-input v-model:value="form.weight" style="width: 100%;" placeholder="请输入权重" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="目标值" name="target" prop="target">
              <a-input v-model:value="form.target" style="width: 100%;" placeholder="请输入目标值" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="计分方法" name="selfScoringMethod" prop="selfScoringMethod">
              <a-input v-model:value="form.selfScoringMethod" style="width: 100%;" placeholder="请输入计分方法" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="备注" name="notes" prop="notes">
              <a-input v-model:value="form.notes" placeholder="请输入备注" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button style="margin-right: 8px;" @click="onClose">
          取消
        </a-button>
        <a-button style="margin-right: 8px;" @click="resetForm">
          重置
        </a-button>
        <a-button type="primary" @click="onSubmit">
          提交
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
